<template>
  <a-card :bordered="false">

    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" type="flex">
          <a-col flex="350px">
            <a-form-item label="">
              <a-input-group compact>
                <a-select v-model="queryParam.searchField" @change="changeForceUpdate">
                  <a-select-option value="userName"> 姓名 </a-select-option>
                  <a-select-option value="deptName"> 部门 </a-select-option>
                </a-select>
                <a-input-search
                  style="width: 65%"
                  v-model="queryParam.keyword"
                  @search="searchQuery"
                  placeholder="请按照关键字进行搜索"
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col flex="auto">
            <span class="flex-btn-line">
              <a-button
                type="primary"
                @click="handlePostExportXls('科技文献报表（个人维度）')"
                icon="vertical-align-bottom"
              >导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator"></div>
    <div class="container">
      <a-table
        ref="table"
        bordered
        size="middle"
        :rowKey="rowKey"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: true }"
      >
      </a-table>
    </div>

    <!-- table区域-begin -->
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { codeInfoList } from '@/api/codeInfo'
import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
import moment from 'moment'

export default {
  name: 'ProjectLibPersonalReport',
  mixins: [JeecgListMixin],
  data() {
    return {
      /* 勾选导出参数 */
      rowKey: 'createUserId',
      columns: [
        {title: '排名',dataIndex: 'rank',align: 'center',width:'80px',},
        {title: '发布人',dataIndex: 'publishUserName',align: 'center',width:'100px',},
        {title: '发布部门',dataIndex: 'deptName',align: 'center',width:'100px',},
        {title: '入库文献数量（份）',dataIndex: 'libCount',align: 'center',width:'120px',},
        {title: '参与的项目数',dataIndex: 'projectCount',align: 'center',width:'120px',},
        {title: '总查看数',dataIndex: 'readCount',align: 'center',width:'50px',},
        {title: '总下载数',dataIndex: 'downloadCount',align: 'center',width:'50px',},
        {title: '总收藏数',dataIndex: 'favouriteCount',align: 'center',width:'50px',},
        {title: '总计分',dataIndex: 'score',align: 'center',width:'80px',},
      ],
      url: {
        list: '/projectReport/projectLibPersonalReport',
        exportXlsUrl: '/projectReport/projectLibPersonalReportExport',
        codeInfoList: '/manage/codeInfo/list',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
    }
  },
  mounted() {
    this.queryParam.searchField = 'userName';
    this.queryParam.keyword = '';
  },
  methods: {
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
@media (max-width: 1170px) {
  .page-main .container section .list-content > div.flex-num1-box {
    flex-wrap: wrap;
    > div {
      &:nth-child(1),
      &:nth-child(2) {
        width: 48%;
      }
      &:nth-child(3) {
        width: 100%;
        justify-content: flex-start;
        > span {
          margin-right: 20px;
          margin-left: 0;
        }
      }
    }
  }
  .page-main .container section .list-content > div.flex-num2-box {
    display: block;
    margin-top: 0;
  }
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-title {
  color: #fff;
}
</style>
